<template>
    <div class="commodity-swiper">
        <Swipe class="commodity-swipe" @change="onChange">
            <SwipeItem v-for="(item, index) in picList" :key="index">
                <ProductVideo v-if="isVideo(item)" :src="item" />
                <img v-else class="commodity-img" v-lazy="item" />
            </SwipeItem>
            <div class="custom-indicator" slot="indicator">
                {{ current + 1 }} / {{picList.length}}
            </div>
        </Swipe>
    </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem, Lazyload } from 'vant';
import ProductVideo from './ProductVideo';
import { createShopDetailImageSrc, createShopDetailVideoSrc } from '@common/utils';
Vue.use(Lazyload);
export default {
    name: 'Swiper', // 详情轮播
    components: {
        Swipe,
        SwipeItem,
        ProductVideo,
    },
    computed: {
        isVideo() {
            return item => item.indexOf('.mp4') > -1;
        },
        videoSrc() {
            return item => createShopDetailVideoSrc(item);
        },
        imageSrc() {
            return item => createShopDetailImageSrc(item);
        },
    },
    props: {
        picList: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            current: 0,
        };
    },
    methods: {
        onChange(index) {
            this.current = index;
        },
    },
};
</script>

<style lang="less">
.commodity-swiper {
    .commodity-swipe {
        height: 375px;
    }
    .commodity-img {
        height: 100%;
        width: 100%;
    }
    .custom-indicator {
        background-color: rgba(0, 0, 0, .3);
        position: absolute;
        right: 12px;
        bottom: 12px;
        width: 40px;
        height: 22px;
        line-height: 22px;
        border-radius: 22px;
        text-align: center;
        font-size: 11px;
        color: @white;
    }
}
</style>
